  <template>
    <div>


      <el-card class="box-card">
        <el-form :inline="true" :model="list" class="demo-form-inline">
          <el-form-item label="审批人">
            <el-input v-model="list.name" placeholder="审批人"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="show">查询</el-button>
            <el-button type="primary" @click="add">添加</el-button>
          </el-form-item>
        </el-form>

      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="update(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text"@click="del(scope.row.id)" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      </el-card>

      <span class="demonstration">完整功能</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="list.page"
        :page-sizes="[3, 6, 9, 12]"
        :page-size="list.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="list.total">
      </el-pagination>


      <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="studnetlist">
          <el-form-item label="id" :label-width="formLabelWidth">
            <el-input v-model="studnetlist.id" autocomplete="off"></el-input>

          </el-form-item>
          <el-form-item label="name" :label-width="formLabelWidth">
            <el-input v-model="studnetlist.name" autocomplete="off"></el-input>

          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="toupdate">确 定</el-button>
        </div>
      </el-dialog>
    </div>

  </template>


  <script>
  export default {
    data() {
      return {
        tableData: [],
        dialogFormVisible:false,
        formLabelWidth: '120px',
        list:{
          currentPage4: 4,
          size:4,
          page:1,
          name:'',
          total:0

        },
        cha:{
          name:''
        },
        studnetlist:{
          name:'',
          id:0
        }
      }
    },
    methods:{
      toupdate(){
        this.$axios.post('student/update',this.studnetlist).then((res)=>{
          alert("修改成功")
          this.show();

        })
        this.dialogFormVisible=false;
      },
      update(row){
this.dialogFormVisible=true;
this.studnetlist=row;
      },
      del(id){

          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$axios.post('student/del?id='+id).then((res)=>{
               alert("删除成功")
              this.show();
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });


      },
      add(){
        this.$router.push('toadd')
      },
      handleSizeChange(val) {
        this.list.size=val;
        this.show()
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.list.page=val;
        this.show()
        console.log(`当前页: ${val}`);
      },

      show(){
        this.$axios.post('student/selPage',this.list).then((res)=>{
          console.log(res.data)
          this.tableData=res.data.data.records
          this.list.total=res.data.data.total;
        })
      },
    },
    created() {
      this.list.page=1;
      this.show();
    }
  }

  </script>
  <style>

  </style>
